import TodoLi from './components/todoLi.js'
import TodoFooter from './components/todoFooter.js'
import AddTodo from './components/addTodo'
import { useSelector } from 'react-redux';


function App() {
  const todoList = useSelector(state=>state.todoList)
  return (
    <div id="todoapp" >
      <div className="title">
        <h1>todo</h1>
      </div>
      <div className="content">
        <AddTodo/>
        <ul id="todo-list">
          {todoList.map(item => <TodoLi todo={item} key={ item.id}/>)}
        </ul>
        <TodoFooter/>
      </div>
    </div>
  );
}

export default App;
